<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/homemobile/lib/reset.css">
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/homemobile/lib/all.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
</head>
<body>

<div id="app">
  <div class="van-nav-bar__content"><div class="van-nav-bar__title van-ellipsis">批量加好友</div></div>
  <div class="pd">
    <van-notice-bar
        left-icon="info-o"
        wrapable
        :scrollable="false"
    >
      请下载模板后输入手机号，可批量复制手机号至模板内，若输入的内容有重复手机号或空行将会自动过滤
    </van-notice-bar>

    <div class="mt title">批量加好友 </div>
    <div class="mt down">
      <a href="download_excel.html">点我下载 Excel表格模板</a>
    </div>
    <van-cell-group class="mt">
      <van-cell title="选择表格:" >
        <!-- <van-uploader :after-read="afterRead">
          <van-button size="mini"  icon="plus" type="primary">上传文件</van-button>
        </van-uploader> -->
		<input type="hidden" name="file_path" id="file_path" value=""/>
		<input type="hidden" name="file_name" id="file_name" value="" />
		<button type="button" class="layui-btn layui-btn-normal" id="test1">
		  <i class="layui-icon">&#xe67c;</i>上传表格
		</button>
		<div class="layui-form-mid layui-word-aux" id="file_name_show"></div>
	  </van-cell>
      <van-cell title="选择员工:" is-link @click="showUser = true">!{!{user}}</van-cell>
      <van-cell title="客户标签:" is-link @click="show = true">!{!{usertag}}</van-cell>
    </van-cell-group>

    <div class="mt">
      <van-notice-bar wrapable color="#333" background="#ecf9ff" >
        <p>表格内手机号将平均分配给选择的员工，分配完成后员工会在企业微信收到添加好友的任务</p>
        <p style="margin-top: 10px">设置标签后，表格内添加成功的客户将会被自动添加选择的标签</p>
      </van-notice-bar>
    </div>

    <div class="mt">
      <van-button size="small" type="info" block  onclick="sub()" >提交</van-button>
    </div>
    <div class="mt">
      <a href="javascript:history.go(-1)"><van-button size="small" block>取消</van-button></a>
    </div>


  </div>
  <van-popup v-model="showUser">
    <div class="pd popup">
      <div class="title">请选择员工</div>
      <div class="mt">
        <van-search
            v-model="search"
            placeholder="请输入搜索关键词"
            @search="onSearch"
        >
        </van-search>
      </div>
      <div>
		  {loop $userList as $user}
			<input type="checkbox" name="user" id="username" value="{$user['id']}" />{$user['name']}
		  {/loop}
		  <van-button size="small" type="info" block onclick="que()">确定</van-button>	
        <!-- <van-tag @click="setUser(item)" class="tag" v-for="(item,index) in 1" type="primary">标签 !{!{index}}</van-tag> -->
      </div>
    </div>
  </van-popup>

  <van-popup v-model="show">
    <div class="pd popup">
      <div class="title">请选择客户标签</div>
      <div class="mt">
		  {loop $etTagArr as $ettag}
				{loop json_decode($ettag['tags'],1) as $tag}
					<input type="checkbox" name="etTagArr" value="{$tag['id']}" title="{$tag['name']}" > {$tag['name']}
				{/loop}	
		  {/loop}
		  <van-button size="small" type="info" block onclick="ques()">确定</van-button>	
        <!-- <van-tag @click="setUserTag(item)" class="tag" v-for="(item,index) in 10" type="primary">标签 !{!{index}}</van-tag> -->
      </div>
    </div>
  </van-popup>



</div>
  <script src="/fission/js/jquery.min.js"></script>
  <script src="/fission/js/layui.all.js"></script>
  <script src="/fission/js/clipboard.min.js"></script>
  <script src="/fission/js/common.js"></script>
  <script src="/js/ajax.js"></script>
<script src="/homemobile/lib/moment.js"></script>
<script src="/homemobile/lib/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            show:false,
            showUser:false,
            search:'',
            user:'请选择',
            users:'',
            usertag:'请选择',
            userTags:'',
        },
        methods:{
            afterRead:function(file){
                console.log(file)
            },
            onSearch:function(){

            },
            setUserTag:function(item){
                this.usertag = item;
                this.show = false;
            },
            setUser:function(item){
                this.user = item;
                this.showUser = false;
            },
        }
    });
	
	function que(){
		var name=document.getElementsByName('user'); 
		var s='';
		for(var i=0; i<name.length; i++){
			if(name[i].checked) s+=name[i].value+','; //如果选中，将value添加到变量s中
		}

        app.$data.users = s;
        myAjaxPost(false, true, 'users.html', {
            user:s
        }, function (resp) {
            if (resp.status == 'success') {
                app.$data.user = resp.data[0];
                app.$data.showUser = false;
            }
        });
	}
	function ques(){
			var name=document.getElementsByName('etTagArr'); 
			var s='';
			for(var i=0; i<name.length; i++){
				if(name[i].checked) s+=name[i].value+','; //如果选中，将value添加到变量s中
			}
            app.$data.userTags = s;
            myAjaxPost(false, true, 'tags.html', {
                tags:s
            }, function (resp) {
                if (resp.status == 'success') {
                    app.$data.usertag = resp.data;
                    app.$data.show = false;
                }
            });
		}
		
	function sub(){
		myAjaxPost(false, true, 'subss.html', { selectedUser:app.$data.users,selectedLableCon:app.$data.userTags,file_path:$("#file_path").val(),file_name:$("#file_name").val()}, function (resp) {
			// console.log(resp);
			if(resp.status == 'success'){
				tusi(resp.msg);
				setTimeout(function(){
					parent.location.href = 'add_friend.html';
				},2000);
			}
		});
	}
	layui.use('upload', function(){
		  var upload = layui.upload;
		   
		  //执行实例
		  var uploadInst = upload.render({
			 accept: 'file'
			,field: 'file'
		    ,elem: '#test1' //绑定元素
		    ,url: 'upload_file.html' //上传接口
		    ,done: function(res){
		      //上传完毕回调
			  layer.msg(res.msg);
			  if(res.status == 'success'){
				  $('#file_path').val(res.data.filePath);
			      $('#file_name').val(res.data.fileName);
			      $('#file_name_show').html(res.data.fileName);
			  }
		    }
		  });
		});
</script>
</body>
</html>
